<template>
    <view class="container">
    <view class="head-nav">
      <!-- 头部选项卡 -->
     <view :class="listIndex==y?'activite':''" @click="checkListIndex(y)" v-for="(x,y) in navList" :key="y">{{x}}</view>
    </view>
		<view class="cu-card">
			<view class="cu-item shadow-warp" v-for="(item, index) in orderItems" :key="index">
				<view class="border-b-line bg-gradual-red radius">
					<view class="cu-list grid col-2 no-border" style="background: none;">
						<view class="cu-item">
							<text class="text-left margin-left text-cut"><span v-if="item.trial === 1">体验订阅-</span>{{ item.title }}</text>
						</view>
						<view class="cu-item">
							<text class="text-right margin-right" v-if="item.status === 0">收益中</text>
							<text class="text-right margin-right" v-else-if="item.status === 1">已完成</text>
						</view>
					</view>
				</view>
				<view class="text-content" style="background-color: #F9F9FC;">
					<view class="cu-list grid col-2 no-border text-sm">
						<view class="cu-item">
							<view class="flex padding-left">
								<image style="height: 150px;width: 150px;" :src="weburl + item.img" mode="scaleToFill"></image>	
								
							</view>									

						</view>
						<view class="cu-item">
							<view class="flex">
								<text class="text-gray">订阅周期：</text>
								<text class="text-black text-df">{{ item.day }}<span v-if="item.type1 === 6">个小时</span>
					<span v-else>天</span></text>
							</view>
							<view class="flex">
								<text class="text-gray"><span v-if="item.type1 === 6">小时</span>
					<span v-else>日</span>收益：</text>
								<text class="text-black text-df">{{ item.rate }}元 / {{item.day_jifen}}积分</text>
							</view>							
							<view class="flex">
								<text class="text-gray">总收益：</text>
								<text class="text-black text-df">{{ parseFloat(item.invest_money).toFixed(2) }}元  / {{item.givejifen + (item.day_jifen * item.day )}}积分 </text>
							</view>							
							<view class="flex">
								<text class="text-gray">订阅金额：</text>
								<text class="text-black text-df" >{{ parseFloat(item.money).toFixed(2) }}元</text>
							</view>
							<view class="flex">
								<text class="text-gray">订阅时间：</text>
								<text class="text-black text-df" style="font-size: 12px;">{{ item.create_time}}</text>
							</view>
							<view class="flex">
								<text class="text-gray">到期时间：</text>
								<text class="text-black text-df" style="font-size: 12px;">{{ item.endtimes }}</text>
							</view>															
							<view class="flex">
		
											<u-count-down
													:time="new Date(item.endtimes).getTime() - (timestamp *1000)"
													format="DD:HH:mm:ss"
													autoStart
													millisecond
													@change="onChange($event, index)"
											>
												<view class="time">
													<view class="time__custom">
														<text class="time__custom__item">{{ timeData[index].days}}</text>
													</view>
													<text class="time__doc">天</text>
													<view class="time__custom">
														<text class="time__custom__item">{{ timeData[index].hours>10?timeData[index].hours:'0'+timeData[index].hours}}</text>
													</view>
													<text class="time__doc">时</text>
													<view class="time__custom">
														<text class="time__custom__item">{{ timeData[index].minutes }}</text>
													</view>
													<text class="time__doc">分</text>
													<view class="time__custom">
														<text class="time__custom__item">{{ timeData[index].seconds }}</text>
													</view>
													<text class="time__doc">秒</text>
												</view>
											</u-count-down>
							</view>							
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
    </view>
</template>
<script>
	export default {
        data() {
            return {
				navList:["进行中","已完成"],
				orderItems: [],
				page: 1,
				lastPage: 0,
				loadMoreText: "加载中...",
				showLoadMore: true,
				navIndex:1,
				listIndex:0,
				timeData: {},
				timestamp:this.helper.now()
            }
        },
		onUnload() {

		},
		onLoad: function (option) {
			this.page = 1,
			this.lastPage = 0,
			this.orderItems = [],
			this.loadMoreText = "加载中...",
			this.showLoadMore = true;			
            this.getData(this.listIndex);
		},
		onReachBottom() {
			 console.log("onReachBottom");
			 console.log('我进来了page是',this.page,'last-page是',this.lastPage,'status是',this.listIndex)

			if (this.page > this.lastPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				this.showLoadMore = true;
				setTimeout(() => {
					this.getData(this.listIndex);
				}, 300);
			}
		},
		onPullDownRefresh() {
			this.page = 1,
			this.lastPage = 0,
			this.orderItems = [],
			this.loadMoreText = "加载更多",
			
			setTimeout(() => {
				this.getData(this.listIndex);
			}, 300);
		},
		methods: {
			onChange(e, index) {
				this.$set(this.timeData, index, e);
			},
			checkListIndex(index){
				
				this.listIndex =index;
				//if(this.listIndex == 1){
					this.orderItems = [],
					this.page = 1,
					this.lastPage = 0
					this.getData(this.listIndex);
					console.log('执行了listindex'+this.listIndex)
				//}
				
				
			  },
            getData: function(listIndex) {
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				
				let page = this.page;
				console.log('listindex是',listIndex,'page是',page)
				let info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['page='+page,'status='+listIndex,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getInvestOrders",
					timestamp:timestamp,
					data:{page:page,status:listIndex,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					let last_page = res.data.data.list.last_page;

					let current_page = res.data.data.list.current_page;
					
					this.page = current_page + 1;
					this.lastPage = last_page;
					
					this.orderItems = this.orderItems.concat(res.data.data.list.data);
					this.timeData = Array(this.orderItems.length).fill({ days: 0, hours: 0, minutes: 0, seconds: 0 });
					if (this.page >= this.lastPage) {
						this.loadMoreText = "没有更多数据了!"
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
            },	
            navToDetails: function(a) {
                uni.navigateTo({
                    url: "/pages/invest/invest?code=" + a.id
                })
            },
            navToContract: function(a) {
                uni.navigateTo({
                    url: "/pages/invest/contract?code=" + a.id
                })
            },
		},
    }
</script>

<style lang="scss">
.panel-scroll-box{
	height: 100%;
	
	.panel-item{
		background: #fff;
		padding: 30px 0;
		border-bottom: 2px solid #000;
	}
}
.cu-list.grid.no-border{
	padding: 0;
}
.cu-list + .cu-list{
	margin: 0;
}
  .head-nav{
    width: 50%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #ff0000;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }
  .box{background: #008000;}
.time {
    @include flex;
    align-items: center;

    &__custom {
         margin-top: 4px;
         width: 22px;
         height: 22px;
         background-color: #0a32c3eb;
         border-radius: 4px;
         /* #ifndef APP-NVUE */
         display: flex;
         /* #endif */
         justify-content: center;
         align-items: center;
    
        &__item {
             color: #fff;
             font-size: 12px;
             text-align: center;
         }
    }
    
    &__doc {
         color: $u-primary;
         padding: 0px 4px;
     }
    
    &__item {
         color: #606266;
         font-size: 15px;
         margin-right: 4px;
     }
}
.text-df{
	font-size: 14px;
}
</style>